<template>
  <view class="content">
    <!-- 搜索 -->
    <mySearch></mySearch> 
    <!-- 轮播图 -->
    <u-swiper :list="swiperList" name="image_src" height="340"></u-swiper>
    <!-- 导航 -->
    <view class="nav">
      <!-- <view v-for='(item,index) in navList' :key="index"></view> -->
      <navigator
        v-for="(item, index) in navList"
        :key="index"
        :url="item.navigator_url"
      >
        <u-image :src="item.image_src" width="128" height="140"></u-image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view v-for="(item1, index1) in floorList" :key="index1">
      <view class="floor-title">
        <u-image
          :src="item1.floor_title.image_src"
          width="750"
          height="59"
        ></u-image>
      </view>
      <view class="floor-content">
        <navigator
          v-for="(item2, index2) in item1.product_list"
          :key="index2"
          :url="item2.navigator_url"
        >
          <u-image
            mode="scaleTofFit"
            :src="item2.image_src"
            width="232"
            :height="index2 == 0 ? 386 : 188"
          ></u-image>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    //轮播图
    // const [err, res] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    // });
    // console.log(res);
    // this.swiperList = res.data.message;

    this.getSwiper();
    this.getNav();
    this.getFloor();
  },
  methods: {
    async getSwiper() {
      //使用uview的请求拦截
      //轮播图
      const res = await this.$u.get("/home/swiperdata");
      //  console.log(res);
      this.swiperList = res.message;
    },
    async getNav() {
      //导航
      const navRes = await this.$u.get("/home/catitems");
      console.log(navRes);
      this.navList = navRes.message;
    },
    async getFloor() {
      //楼层
      const floorRes = await this.$u.get("home/floordata");
      console.log(floorRes);
      this.floorList = floorRes.message;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
}
.nav {
  display: flex;
  justify-content: space-around;
  padding: 12rpx 0;
  margin-bottom: 30rpx;
}
.floor-content {
  height: 410rpx;
  padding: 12rpx;
  navigator {
    float: left;
    &:nth-child(n + 2) {
      margin-left: 15rpx;
    }
    &:nth-child(n + 4) {
      margin-top: 10rpx;
    }
  }
}
</style>
